<template>
  <div class="details">
    <div class="title">
      <el-button size="small" type="primary" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
    </div>

    <el-tabs type="border-card" @tab-click="handleTabClick">
      <el-tab-pane v-for="(item, index) in getTabsTitle"
                   :key="index"
                   :label="item.tableName">

        <div class="head-search">
          <search @onSubmit="onSearch">
            <el-form-item label="名称">
              <el-input placeholder="请输入名称" clearable v-model="searchData.mdName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="searchData.mdType" clearable placeholder="请选择类型">
                <el-option v-for="(item, index) in dicDataType"
                           :key="index"
                           :label="item.dictLabel"
                           :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编码">
              <el-input placeholder="请输入编码" v-model="searchData.mdCode" size="small"></el-input>
            </el-form-item>
          </search>
        </div>

        <div class="fun-btn">
          <el-button type="primary" size="small" @click="handleAdd('add')" icon="el-icon-circle-plus-outline">新增</el-button>
          <el-button type="danger" @click="handleDel" plain size="small" icon="el-icon-delete">删除</el-button>
        </div>

        <avue-crud :option="option"
                   :table-loading="tableLoading"
                   :data="tableData.list"
                   :page.sync="page"
                   ref="crud"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   @selection-change="handleSelectChange"
                   @row-update="handleRowUpdate"
        >
          <template slot="isPrimaryKey" slot-scope="{row}">
            <el-switch v-model="row.isPrimaryKey" @change="handleRowUpdate(row, 'isPrimaryKey')"></el-switch>
          </template>

          <template slot="isExtend" slot-scope="{row}">
            <el-switch v-model="row.isExtend" @change="handleRowUpdate(row, 'isExtend')"></el-switch>
          </template>
          <template slot="isAutoIncrement" slot-scope="{row}">
            <el-switch v-model="row.isAutoIncrement" @change="handleRowUpdate(row, 'isAutoIncrement')"></el-switch>
          </template>

          <template slot="isQuickQuery" slot-scope="{row}">
            <el-switch v-model="row.isQuickQuery" @change="handleRowUpdate(row)"></el-switch>
          </template>
          <template slot="isQuery" slot-scope="{row}">
            <el-switch v-model="row.isQuery" @change="handleRowUpdate(row)"></el-switch>
          </template>
          <template slot="isNull" slot-scope="{row}">
            <el-switch v-model="row.isNull" @change="handleRowUpdate(row)"></el-switch>
          </template>
          <template slot="isEnable" slot-scope="{row}">
            <el-switch v-model="row.isEnable" @change="handleRowUpdate(row)"></el-switch>
          </template>
          <template slot="isTableHead" slot-scope="{row}">
            <el-switch v-model="row.isTableHead" @change="handleRowUpdate(row)"></el-switch>
          </template>
          <template slot="defTableHead" slot-scope="{row}">
            <el-switch v-model="row.defTableHead" @change="handleRowUpdate(row)"></el-switch>
          </template>
        </avue-crud>

      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="dialogTitle"
               :width="dialogWidth"
               :top="dialogTop"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogAdd">
      <div class="import-content">
        <add-category-det :dicDataType="dicDataType"
                          :idTable="idTable"
                          @handleSuccess="handleSuccess"
                          v-if="dialogType === 'add'"></add-category-det>

      </div>
    </el-dialog>

  </div>
</template>

<script>
import Search from '../../../../components/search/search'
import AddCategoryDet from '../settingComponents/category/addCategoryDet'
import {
  delEntityCategoryList,
  editEntityCategoryList,
  getEntityCategoryList,
  queryCategoryInfo
} from '../../../../api/category/category'
import { getArchivesDic, getSysDicId } from '../../../../api/dictionary/dictionary'

export default {
  name: 'CategoryDetails',
  components: { AddCategoryDet, Search },
  // 门类详情
  data () {
    return {
      getTabsTitle: [],
      idTable: '',
      tableLoading: false,
      tableSelected: [], // 列表选中项
      searchData: {
        mdName: '',
        mdType: '',
        mdCode: ''
      },
      dicDataType: [], // 元数据类型字典
      dictTypeNameData: [], // 字典类型下拉框数据
      dialogAdd: false,
      dialogTitle: '',
      dialogWidth: '',
      dialogType: '',
      dialogTop: '',
      page: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: {},
      rowData: {} // 行数据
    }
  },
  mounted () {
    this.gettabs()
  },
  computed: {
    option () {
      return {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 335px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        editBtnText: '修改功能', // 编辑按钮的文本
        editTitle: '修改功能', // 编辑按钮的文本
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 200,
        labelWidth: 150,
        column: [
          {
            label: '名称',
            prop: 'mdName',
            overHidden: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入元数据名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '类型',
            prop: 'mdType',
            type: 'select',
            overHidden: true,
            width: 100,
            dicData: this.dicDataType,
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            },
            rules: [
              {
                required: true,
                message: '请选择元数据类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编码',
            prop: 'mdCode',
            overHidden: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入元数据编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '长度',
            prop: 'mdLength',
            type: 'number',
            overHidden: true,
            width: 120,
            minRows: 0,
            rules: [
              {
                required: true,
                message: '请输入元数据长度',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '索引名',
            prop: 'indexName',
            overHidden: true,
            width: 120
          },
          {
            label: '查询类型',
            prop: 'queryType',
            overHidden: true,
            width: 120,
            type: 'select',
            dicUrl: '/yuyi-config-boot/api/config/dictData/child?dictTypeName=query_type',
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            }
          },
          {
            label: '查询排序号',
            prop: 'orderNo',
            overHidden: true,
            type: 'number',
            width: 120,
            minRows: 0,
            rules: [
              {
                required: true,
                message: '请输入查询排序号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '字典类型名',
            prop: 'dictTypeName',
            type: 'select',
            overHidden: true,
            width: 100,
            dicData: this.dictTypeNameData,
            props: {
              label: 'dictName',
              value: 'dictTypeName'
            }
          },
          {
            label: '是否为默认表头',
            prop: 'defTableHead',
            type: 'switch',
            slot: true,
            value: false,
            width: 150,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '默认表头宽度(px)',
            prop: 'defWidthHead',
            type: 'number',
            width: 150,
            minRows: 80,
            value: 80
          },
          {
            label: '主键',
            prop: 'isPrimaryKey',
            type: 'switch',
            span: 6,
            slot: true,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '为空',
            prop: 'isNull',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可用',
            prop: 'isEnable',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可查询',
            prop: 'isQuery',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可序列',
            prop: 'isQuickQuery',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '自增',
            prop: 'isAutoIncrement',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '继承',
            prop: 'isExtend',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '是否可设为表头',
            prop: 'isTableHead',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            width: 150,
            dicData: [{ value: false }, { value: true }]
          }
        ]
      }
    }
  },
  methods: {
    gettabs () {
      queryCategoryInfo(this.$route.query.id).then(res => {
        this.getTabsTitle = res.data.data
        this.idTable = this.getTabsTitle[0].id
        this.getList()
      }).catch()
      // 获取档案数据字典
      getArchivesDic({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        this.dictTypeNameData = res.data.data.list
      })
      // 获取系统元数据类型字典
      getSysDicId('metadata_type').then(res => {
        this.dicDataType = res.data.data
      })
    },
    handleTabClick (val) {
      this.idTable = this.getTabsTitle[val.index].id
      this.getList()
    },
    getList () {
      const param = {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        params: [{
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      }
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          param.params.push({
            name: key,
            op: key === 'mdType' ? 'eq' : 'like',
            value: this.searchData[key]
          })
        }
      })
      this.tableLoading = true
      getEntityCategoryList(param).then(res => {
        this.tableData = res.data.data
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onSearch () {
      // 搜索
      this.getList()
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.currentPage = val
      this.getList()
    },
    handleSelectChange (val) {
      // 列表选中项
      this.tableSelected = val
    },
    handleAdd (type, row) {
      // 新增
      const title = {
        add: '新增',
        edit: '修改功能',
        see: '查看'
      }
      const width = {
        add: '80%',
        edit: '500px',
        see: '600px'
      }
      this.rowData = row
      this.dialogAdd = true
      this.dialogType = type
      this.dialogTitle = title[type]
      this.dialogWidth = width[type]
      this.dialogTop = type === 'add' ? '2vh' : '5vh'
    },
    handleSuccess () {
      // 新增成功
      this.getList()
      this.dialogAdd = false
    },
    handleDel () {
      // 删除
      if (this.tableSelected.length > 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map(item => {
            ids.push(item.id)
          })
          delEntityCategoryList(ids).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.warning('请最少选择一条数据进行删除操作！')
      }
    },
    handleRowUpdate (row, index, done) {
      // 修改保存
      const rowData = row
      if (index === 'isExtend' && rowData.isExtend) {
        rowData.isAutoIncrement = false
      }
      if (index === 'isAutoIncrement' && rowData.isAutoIncrement) {
        rowData.isExtend = false
      }
      editEntityCategoryList(rowData).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        if (typeof index === 'number') {
          this.getList()
          done()
        }
      }).catch(() => {
        if (done) {
          done()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .details {
    .head-search {
      ::v-deep .search-btn {
        margin-top: 0;
      }
    }
    ::v-deep .el-dialog{
      margin: 0 auto;
    }
  }
</style>
